<template>
    <div>

        <el-card style="margin-bottom: 20px;width: 100%;height: 21vh">
            <span style="font-weight: bold;font-size: 18px">基本信息</span>
            <el-row :gutter="50" style="margin: 20px 0">
                <el-col :span="6">
                    <div @click="toProduct">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #ffaaaa, #ff7474);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-s-goods"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        {{ productTotal }}
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">商品数量</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>

                <el-col :span="6">
                    <div @click="toOrders">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #ffccaa, #ffad76);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-s-data"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        {{ orderTotal }}
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">订单数量</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>

                <el-col :span="6">
                    <div @click="toUser">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #bed3ed, #96b7e2);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-s-shop"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        {{ userTotal }}
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">用户数量</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>

                <el-col :span="6">
                    <div @click="toStore">
                        <el-card shadow="hover"
                                 style="background: linear-gradient(45deg, #b5bae2, #8991d1);width: 100%;height: 9.8vh">
                            <div style="display: flex">
                                <div class="size-icon" style="flex: 1;margin-top: 5px"><i class="el-icon-s-goods"
                                                                                          style="display: flex;justify-content: center;"></i>
                                </div>
                                <div style="flex: 3;display: flex;flex-direction: column">
                                    <div style="text-align: center;color: white;font-family: 方正姚体;font-size: 20px">
                                        {{ storeTotal }}
                                    </div>
                                    <div style="text-align: center;color: white;font-family: 方正姚体">商家数量</div>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </el-col>

            </el-row>
        </el-card>


        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <div id="line" style="width: 100%;height: 350px"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div id="bar" style="width: 100%;height: 350px"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
                <el-card>
                    <div id="product" style="width: 100%;height: 350px"></div>
                </el-card>
            </el-col>

        </el-row>


        <el-card style="width: 100%;margin-top: 20px">
            <span style="font-weight: bold;font-size: 18px">热卖店铺TOP10</span>
            <!--     商家信息列表    展示-->
            <template>
                <el-table
                        :header-cell-style="{fontSize: '14px','text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :data="stores"
                        stripe
                        style="width: 100%">
                    <el-table-column width="100" label="排名" type="index" align="center"></el-table-column>
                    <el-table-column prop="avatar" label="头像" width="100px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" fit="fill" :src="scope.row.avatar"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="店铺名称"></el-table-column>

                    <el-table-column prop="username" label="店铺账号" show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="transactions" label="交易额"></el-table-column>
                    <el-table-column prop="sales" label="销量" show-overflow-tooltip
                    ></el-table-column>

                </el-table>

            </template>

        </el-card>
    </div>
</template>


<script>


import {defineComponent} from 'vue'
import * as echarts from "echarts"; // 折线图参数


// 折线图参数
const lineOption = {
    // 标题
    title: {
        text: '订单详情统计图',
        left: 'right' // 标题位置
    },
    // 提示框
    tooltip: {
        trigger: 'axis'
    },
    // 图例
    legend: {
        // orient: 'vertical', // 图例方向
        left: 'left' // 图例位置
    },
    // 工具箱
    // X轴
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    // Y轴
    yAxis: {
        type: 'value'
    },
    // 数据
    series: [
        {
            name: '订单金额',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '订单数量',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '购买人数',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '被选商家数量',
            data: [],
            type: 'line',
            smooth: true
        },
    ]
};


// 折线图参数
const productOption = {
    // 标题
    title: {
        text: '热门商品TOP10',
        left: 'left' // 标题位置
    },
    // 提示框
    tooltip: {
        trigger: 'axis'
    },
    // 图例
    legend: {
        // orient: 'vertical', // 图例方向
        left: 'right' // 图例位置
    },
    // 工具箱
    // X轴
    xAxis: {
        type: 'category',
        data: []
    },
    // Y轴
    yAxis: {
        type: 'value'
    },
    // 数据
    series: [
        {
            name: '商品的销量',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '商品的点击量',
            data: [],
            type: 'line',
            smooth: true
        },
        {
            name: '商品的收藏量',
            data: [],
            type: 'line',
            smooth: true
        }
    ]
};


// 柱状图参数
const barOption = {
    // 标题
    title: {
        text: '热门商品分类统计图',
        left: 'center' // 标题位置
    },
    // 提示框
    tooltip: {
        trigger: 'axis'
    },
    // 图例
    legend: {
        orient: 'vertical', // 图例方向
        left: 'left' // 图例位置
    },
    // X轴
    xAxis: {
        type: 'category',
        data: []
    },
    // Y轴
    yAxis: {
        type: 'value'
    },
    // 数据
    series: [
        {
            name: '该分类下的商品数量',
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar',
            smooth: true
        },
        {
            name: '该分类下的订单数量',
            data: [70, 87, 72, 114, 50, 36, 88],
            type: 'bar',
            smooth: true
        },
    ]
};

//  饼图参数
const pieOption = {
    // 标题
    title: {
        text: '饼状图', // 标题文字
        subtext: '比例图', // 标题副文字
        left: 'center' // 标题位置
    },
    // 提示框
    tooltip: {
        trigger: 'item' // 触发方式
    },
    // 图例
    legend: {
        orient: 'vertical', // 图例方向
        left: 'left', // 图例位置
    },
    // 数据系列
    series: [
        {
            name: 'Access From', // 系列名称
            type: 'pie', // 图表类型
            center: ['50%', '60%'],  // 设置饼图的位置
            radius: '70%', // 饼状图半径
            data: [ // 数据
                {value: 1048, name: 'Search Engine'}, // 搜索引擎
                {value: 735, name: 'Direct'}, // 直接访问
                {value: 580, name: 'Email'}, // 邮件营销
                {value: 484, name: 'Union Ads'}, // 联盟广告
                {value: 300, name: 'Video Ads'} // 视频广告
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10, // 阴影模糊半径
                    shadowOffsetX: 0, // 阴影水平偏移
                    shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
                }
            }
        }
    ]
};

export default defineComponent({
    name: "Data",
    data() {
        return {
            productTotal: 0,    // 商品数量
            orderTotal: 0,    //  订单数量
            userTotal: 0,    //  用户数量
            storeTotal: 0,    //  商家数量
            stores: [],           // 商家TOP10
        }
    },

    mounted() {
        this.loadBarCharts()
        this.loadLineCharts()
        this.loadProductCharts()
        // this.loadStoreTop10()
        this.$request.get('/store/storeTop10').then(res => {
            // console.log(res)
            if (res.code === '200') {
                this.stores = res.data;
                // console.log(this.stores)
            }
        })
        this.$request.post('/product/getTotal').then(res => {
            if (res.code === '200') {
                this.productTotal = res.data;
            }
        })
        this.$request.post('/user/getTotal').then(res => {
            if (res.code === '200') {
                this.userTotal = res.data;
            }
        })
        this.$request.post('/orders/getTotal').then(res => {
            if (res.code === '200') {
                this.orderTotal = res.data;
            }
        })
        this.$request.post('/store/getTotal').then(res => {
            if (res.code === '200') {
                this.storeTotal = res.data;
            }
        })
    },

    methods: {

        toProduct() {
            this.$router.push('/manager/product')
        },
        toOrders() {
            this.$router.push('/manager/orders')
        },
        toUser() {
            this.$router.push('/manager/user')
        },
        toStore() {
            this.$router.push('/manager/store')
        },

        // 加载折线图
        loadPieCharts() {
            // 初始化 饼图
            // 获取id为line的DOM元素
            // let pieDom = document.getElementById('pie');
            // 初始化echarts实例
            // let pieChart = echarts.init(pieDom);
            // 设置图表配置项
            // pieChart.setOption(pieOption);

        },
        loadLineCharts() {
            // 初始化 折线图
            // 获取id为line的DOM元素
            let lineDom = document.getElementById('line');
            // 初始化echarts实例
            let lineChart = echarts.init(lineDom);
            // 设置图表配置项
            this.$request.get('/lineCharts').then(res => {
                if (res.code === '200') {
                    lineOption.xAxis.data = res.data?.map(v => v.date) || []
                    lineOption.series[0].data = res.data?.map(v => v.price) || []
                    lineOption.series[1].data = res.data?.map(v => v.count) || []
                    lineOption.series[2].data = res.data?.map(v => v.userCount) || []
                    lineOption.series[3].data = res.data?.map(v => v.storeCount) || []
                    lineChart.setOption(lineOption)
                }
            })
        },

        //  加载商品TOP20
        loadProductCharts() {
            // 初始化 折线图
            // 获取id为line的DOM元素
            let productDom = document.getElementById('product');
            // 初始化echarts实例
            let productChart = echarts.init(productDom);
            // 设置图表配置项
            this.$request.get('/productCharts').then(res => {
                // console.log(res)
                if (res.code === '200') {
                    productOption.xAxis.data = res.data?.map(item => item.productName) || [];
                    productOption.series[0].data = res.data?.map(item => item.sales) || [];
                    productOption.series[1].data = res.data?.map(item => item.views) || [];
                    productOption.series[2].data = res.data?.map(item => item.favoriteCount) || [];
                    productChart.setOption(productOption)
                }
            })
        },

        // 加载柱状图
        loadBarCharts() {
            // 初始化 柱状图
            // 获取id为line的DOM元素
            let barDom = document.getElementById('bar');
            // 初始化echarts实例
            let barChart = echarts.init(barDom);
            // 设置图表配置项
            // barChart.setOption(barOption);

            this.$request.get('/barCharts').then(res => {
                // console.log(res)
                if (res.code === '200') {
                    // 柱状图
                    barOption.xAxis.data = res.data?.map(v => v.name) || []
                    barOption.series[0].data = res.data?.map(v => v.productCount) || []
                    barOption.series[1].data = res.data?.map(v => v.orderCount) || []
                    barChart.setOption(barOption)
                }
            })
        },

        // 加载TOP10的商家信息
        loadStoreTop10() {
            this.$request.get('/store/storeTop10').then(res => {
                if (res.code === '200') {
                    this.stores = res.data;
                    // console.log(this.stores)
                }
            })
        }

    }
})
</script>


<style>
.size-icon {
    font-size: 35px;
    color: white;
}

</style>